<template>
    <div>
        <div class="Recharge" v-if="isRe">
            <div class="Recharge-top">
                <p @click="canelRe">X</p>
            </div>
            <div class="Recharge-Title">
                <h1>即刻成为 <span>汽水会员</span></h1>
                <div class="Recharge-Title-Conter">
                    <p>
                        <svg t="1705647653579" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="9279" width="200" height="200">
                            <path
                                d="M885.333333 256H138.666667a53.393333 53.393333 0 0 0-53.333334 53.333333v576a53.393333 53.393333 0 0 0 53.333334 53.333334h746.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V309.333333a53.393333 53.393333 0 0 0-53.333334-53.333333z m10.666667 629.333333a10.666667 10.666667 0 0 1-10.666667 10.666667H138.666667a10.666667 10.666667 0 0 1-10.666667-10.666667V309.333333a10.666667 10.666667 0 0 1 10.666667-10.666666h746.666666a10.666667 10.666667 0 0 1 10.666667 10.666666zM610.046667 514.2a107.46 107.46 0 0 0-20.493334-18.78c-8.813333-8.806667-16.526667-20.666667-22.36-34.42-9.033333-21.333333-11.813333-42.666667-12.553333-56.78A21.333333 21.333333 0 0 0 533.333333 384h-0.566666A21.333333 21.333333 0 0 0 512 405.333333v251.56C493.666667 645.946667 471.333333 640 448 640c-27.38 0-53.333333 8.173333-73.14 23.013333-21.333333 16-33.526667 38.666667-33.526667 62.32s12.22 46.34 33.526667 62.32C394.666667 802.493333 420.62 810.666667 448 810.666667s53.333333-8.173333 73.14-23.013334c21.333333-16 33.526667-38.666667 33.526667-62.32V520.6q3.213333 3.58 6.586666 6.813333a21.473333 21.473333 0 0 0 2.953334 2.366667 64.24 64.24 0 0 1 13.333333 12c8.666667 10.22 15.84 24.18 20.733333 40.373333a21.333333 21.333333 0 0 0 40.84-12.346666c-6.693333-22.033333-16.446667-40.753333-29.066666-55.606667zM448 768c-34.666667 0-64-19.54-64-42.666667s29.333333-42.666667 64-42.666666 64 19.54 64 42.666666-29.333333 42.666667-64 42.666667zM170.666667 106.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h640a21.333333 21.333333 0 0 1 0 42.666667H192a21.333333 21.333333 0 0 1-21.333333-21.333333z m-42.666667 85.333333a21.333333 21.333333 0 0 1 21.333333-21.333333h725.333334a21.333333 21.333333 0 0 1 0 42.666666H149.333333a21.333333 21.333333 0 0 1-21.333333-21.333333z"
                                fill="#88AF8E" p-id="9280"></path>
                        </svg>
                        享受千万曲库
                    </p>
                    <p>
                        <svg t="1705647949173" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8003" width="200" height="200">
                            <path d="M927.99999999 768H96.00000001V256h831.99999998v512z m64.00000001-576H32v640h960V192z"
                                fill="#88AF8E" p-id="8004"></path>
                            <path
                                d="M239.328 352.672v192h160v64h-160v64h224v-191.99999999h-160v-64.00000001h160v-64h-192.00000002zM751.328 608v-256h-224v320h256v-64h-32z m-64 0h-96v-192h96v192z"
                                fill="#88AF8E" p-id="8005"></path>
                        </svg>
                        高质量听歌体验
                    </p>
                    <p>
                        <svg t="1705648057660" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="13607" width="200" height="200">
                            <path
                                d="M908.328026 153.4683 326.284763 153.4683c-27.269064 0-55.602366 19.863397-55.602366 47.13246l0 49.39499 27.579125 0 0-49.39499c0-12.065803 15.97074-19.553335 28.02324-19.553335l582.043263 0c12.051477 0 24.251334 7.487531 24.251334 19.553335l0 270.013667L436.157149 470.614427l0 27.592428 496.42221 0 0 66.63156c0 12.072967-12.199856 16.112979-24.251334 16.112979L436.157149 580.951395l0 27.578102 472.170876 0c27.269064 0 51.830459-16.429181 51.830459-43.691081L960.158485 200.600761C960.158485 173.331697 935.597089 153.4683 908.328026 153.4683zM648.400065 546.05256c0-13.802354-11.230786-25.034163-25.047466-25.034163-13.802354 0-25.035186 11.231809-25.035186 25.034163 0 13.81668 11.232832 25.041326 25.035186 25.041326C637.169279 571.093886 648.400065 559.869241 648.400065 546.05256zM612.10851 546.05256c0-6.195096 5.048993-11.244089 11.244089-11.244089 6.207375 0 11.258415 5.050016 11.258415 11.244089 0 6.207375-5.051039 11.257391-11.258415 11.257391C617.157503 557.309952 612.10851 552.260959 612.10851 546.05256zM716.795804 634.089639l-27.039843 5.41329 10.314926 51.575656c0.551562 2.774183 0.161682 5.683443-1.105171 8.187473l-0.699941 0.080841c-2.168386 4.335748-6.531763 5.709025-11.380188 5.709025L574.470285 705.055924c-4.862751 0-9.211802-1.373277-11.392468-5.735631-1.455141-2.90926-1.736551-5.548366-0.795109-8.67252 2.100848-6.949272 11.636015-47.645137 9.184173-57.528228l-18.677385 4.847401-8.376785 0.188288c0.054235 4.982478-4.860704 33.073256-8.524141 45.112454-3.00238 9.911744-2.100848 19.149129 2.532683 28.386514 6.853082 13.735839 20.669762 20.980847 36.050054 20.980847l112.415302 0c15.35164 0 29.16832-7.218402 36.050054-20.954241l0.701988-0.726547c3.985778-7.999185 5.223978-16.887622 3.474125-25.613354L716.795804 634.089639zM360.570637 277.574876 111.846856 277.574876c-26.51591 0-48.007387 21.491477-48.007387 48.007387l0 496.927723c0 26.529213 21.491477 48.021713 48.007387 48.021713l248.723781 0c26.514887 0 48.007387-21.4925 48.007387-48.021713l0-496.927723C408.578024 299.066353 387.085524 277.574876 360.570637 277.574876zM380.998899 817.312614c0 11.257391-15.20326 25.63996-26.460652 25.63996L111.846856 842.952574c-11.257391 0-20.428262-14.382569-20.428262-25.63996l0-43.307342 289.580305 0L380.998899 817.312614zM380.998899 746.425124 91.418594 746.425124 91.418594 387.890354l289.580305 0L380.998899 746.425124zM380.998899 360.311229 91.418594 360.311229l0-34.594913c0-11.257391 9.17087-20.563338 20.428262-20.563338l242.690368 0c11.257391 0 26.460652 9.304923 26.460652 20.563338L380.997875 360.311229zM298.261523 318.943053l-96.52745 0c-7.621585 0-13.790074 6.167466-13.790074 13.790074s6.167466 13.790074 13.790074 13.790074l96.52745 0c7.621585 0 13.789051-6.167466 13.789051-13.790074S305.883107 318.943053 298.261523 318.943053zM233.192551 834.19819c13.31833 0 24.158213-10.82658 24.158213-24.158213 0-13.305027-10.839883-24.158213-24.158213-24.158213-13.31833 0-24.158213 10.853186-24.158213 24.158213C209.033315 823.37161 219.874221 834.19819 233.192551 834.19819zM233.192551 806.619064c1.88493 0 3.419889 1.535983 3.419889 3.420913 0 3.770883-6.840802 3.770883-6.840802 0C229.771639 808.155047 231.306598 806.619064 233.192551 806.619064z"
                                p-id="13608" fill="#88AF8E"></path>
                        </svg>
                        手机/电脑端通用
                    </p>
                </div>
            </div>
            <div class="Recharge-specification">
                <div class="Recharge-specification-item" v-for="(item, index) in data" :key="item.title"
                    @click="() => { idx = index; generate(item) }"
                    :style="{ 'border': idx == index ? '3px solid #00CB64 ' : '' }">
                    <div>{{ item.title }}</div>
                    <div>
                        <p>{{ item.pie }}</p>元
                    </div>
                </div>
            </div>
            <div class="Recharge-code">
                <qrcode-vue :value="value" :size="120" :margin="2" :level="level" :render-as="renderAs" />
                <div class="Recharge-context">
                    <p><span class="Recharge-pie">{{ objIdx.pie }}</span>元</p>
                    <span>扫码订阅</span>
                    <div class="Recharge-zfb-logo"><svg t="1705902326056" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4317" width="200" height="200">
                            <path
                                d="M283.573889 791.632091C133.909948 791.632091 110.281957 697.108128 118.157954 657.724143 126.031951 618.334158 169.357934 567.134178 252.555901 567.134178 348.231864 567.134178 433.771831 591.550169 536.58579 641.624149 464.467819 735.610113 375.687853 791.632091 283.573889 791.632091M1023.9996 701.048126 1023.9996 196.906323C1023.9996 88.196366 935.845634 0.0004 827.093677 0.0004L196.907923 0.0004C88.195966 0.0004 0 88.160366 0 196.906323L0 827.092077C0 935.810034 88.159966 1024 196.907923 1024L827.093677 1024C923.981639 1024 1004.567608 953.980027 1020.959601 861.772063 968.759622 839.312072 742.38171 741.58211 624.515756 685.208132 534.815791 793.87209 440.841828 859.074064 299.193883 859.074064 157.541938 859.074064 63.015975 771.940098 74.411971 665.10214 81.889968 594.980168 129.973949 480.492212 338.709868 500.184205 448.729825 510.566201 499.105805 531.086193 588.91777 560.652181 611.993761 518.120198 631.365753 471.276216 645.909748 421.416235L248.129903 421.416235 248.129903 382.032251 444.911826 382.032251 444.911826 311.140278 204.83592 311.140278 204.83592 267.816295 444.911826 267.816295 444.911826 165.688335C444.911826 165.688335 447.177825 149.664342 464.741818 149.664342L563.20578 149.664342 563.20578 267.816295 819.19968 267.816295 819.19968 311.140278 563.19978 311.140278 563.19978 382.032251 771.941698 382.032251C752.799706 460.23022 723.739717 531.970192 687.235732 594.756168 747.951708 616.656159 1023.9996 701.048126 1023.9996 701.048126"
                                fill="#1296db" p-id="4318"></path>
                        </svg>支付宝</div>
                    <div class="Recharge-agreement">
                        到期自动续费8元/月，可随时取消，同一账号仅可享受一次优惠。已阅读并同意《会员服务协》
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, onMounted } from 'vue'

import QrcodeVue, { Level, RenderAs } from 'qrcode.vue';//生成二维码

const level = ref<Level>('M');
const renderAs = ref<RenderAs>('svg')

const emit = defineEmits(['canelRe'])
defineProps({
    isRe: {
        type: Boolean,
        default: false
    },
})
onMounted(() => {
    generate(objIdx.value)
})
const canelRe = () => {
    emit('canelRe', false)
}
const generate = (item: any) => {
    objIdx.value = item
    value.value = `alipays://platformapi/startapp?appId=20000123&actionType=scan&biz_data={"s": "money","u": "2088632867584306","a": "${item.pie}","m":"${item.title}"}`
}
const data = ref([{ title: '连续包月', pie: 8 }, { title: '连续包季', pie: 20 }, { title: '连续包年', pie: 48 }])//支付信息
const idx = ref<number>(0)//选择套餐
const objIdx = ref<object>({ title: '连续包月', pie: 8 })//套餐内容
const value = ref<string>('')

</script>

<style lang="scss" scoped>
.Recharge {
    width: 50vw;
    height: 90vh;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2E2E2E;
    animation: identifier 0.5s ease-in-out;

    .Recharge-top {
        display: flex;
        justify-content: flex-end;

        p {
            color: white;
            padding: 2%;
            font-size: 1rem;
            font-weight: 600;
        }

        p:hover {
            color: #B5CEA8;
            cursor: pointer;
        }
    }

    .Recharge-Title {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        h1 {
            color: #fff;
        }

        .Recharge-Title-Conter {
            width: 100%;
            margin-top: 5%;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
                padding: 0 1%;
                color: #88AF8E;
                height: 100%;

                svg {
                    width: 1rem;
                    height: 100%;
                    vertical-align: middle;
                }
            }
        }
    }

    .Recharge-specification {
        width: 90%;
        margin: 0 auto;
        margin-top: 5%;
        display: flex;
        justify-content: space-between;

        .Recharge-specification-item {
            background-color: #323336;
            width: 25%;
            height: 10rem;
            border-radius: 10%;
            text-align: center;

            div {
                margin-top: 20%;
                color: white;
            }

            div:last-child p {
                display: inline-block;
                font-size: 2rem;
                font-weight: 700;
            }
        }
    }

    .Recharge-code {
        width: 90%;
        height: 33.5%;
        margin: 0 auto;
        margin-top: 2%;
        margin-left: 5%;
        padding-right: 5%;
        border-radius: 10px;
        background-color: #444341;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        svg{
            width: 50%;
            height: 80%;
        }
        .Recharge-context {
            width: 50%;
            height: 60%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .Recharge-pie{
                font-weight: 700;
                font-size: 1.7rem;
            }
            .Recharge-zfb-logo {
                svg {
                    width: 1rem;
                    height: 1rem;
                    vertical-align: middle;
                    margin-right: 2%;
                }
            }
            .Recharge-agreement {
                font-size: 0.5rem;
            }
        }
    }

}</style>